import { PROJECT_PREFIX } from '../../types/constants'
import { DEFAULT_DESCRIPTION_LIST_PROPS } from './types'

/**
 * 生成描述列表样式
 * @param themeColor 主题颜色
 * @param labelAlign 标签对齐方式
 * @param contentAlign 内容对齐方式
 * @param divider 是否显示分割线
 * @returns 样式字符串
 */
export function styles(
  themeColor: string = DEFAULT_DESCRIPTION_LIST_PROPS.themeColor!,
  labelAlign: string = DEFAULT_DESCRIPTION_LIST_PROPS.labelAlign!,
  contentAlign: string = DEFAULT_DESCRIPTION_LIST_PROPS.contentAlign!,
  divider: boolean = DEFAULT_DESCRIPTION_LIST_PROPS.divider!,
): string {
  return `
  .description-list {
    all: initial !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
    width: 100% !important;
    
    /* 标题样式 */
    .description-list-title {
      margin-bottom: 16px !important;
      font-size: 16px !important;
      font-weight: bold !important;
      color: var(--${PROJECT_PREFIX}-theme-text-primary) !important;
    }
    
    /* 水平布局 */
    &.description-list-horizontal .description-item {
      display: flex !important;
      margin-bottom: ${divider ? '16px' : '8px'} !important;
    }
    
    /* 垂直布局 */
    &.description-list-vertical .description-item {
      display: block !important;
      margin-bottom: ${divider ? '16px' : '8px'} !important;
    }
    
    /* 描述项 */
    .description-item {
      /* 标签样式 */
      .description-item-label {
        color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
        font-weight: bold !important;
        text-align: ${labelAlign} !important;
        
        ${labelAlign === 'right' ? 'padding-right: 8px' : ''} !important;
        ${labelAlign === 'left' ? 'padding-left: 8px' : ''} !important;
        span {
            font-weight: bold !important;
        }
        
        &.has-colon::after {
          content: ':' !important;
          margin: 0 8px 0 2px !important;
        }
        
        /* 图标样式 */
        .description-item-icon {
          margin-right: 8px !important;
          color: ${themeColor} !important;
        }
      }
      
      /* 内容样式 */
      .description-item-content {
        flex: 1 !important;
        text-align: ${contentAlign} !important;
        word-break: break-word !important;
      }
      
      /* 高亮项 */
      &.description-item-highlight .description-item-content {
        color: ${themeColor} !important;
        font-weight: 500 !important;
      }
    }
    
    /* 分割线 */
    ${divider
      ? `
      &.description-list-horizontal .description-item:not(:last-child) {
        border-bottom: 1px dashed #f0f0f0 !important;
        padding-bottom: 16px !important;
      }
      
      &.description-list-vertical .description-item:not(:last-child) {
        border-bottom: 1px dashed #f0f0f0 !important;
        padding-bottom: 8px !important;
      }
    `
      : ''}
    
    /* 响应式设计 - 小屏幕下自动切换为垂直布局 */
    @media (max-width: 576px) {
      &.description-list-horizontal .description-item {
        flex-direction: column !important;
      }
      
      .description-item-label {
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 4px !important;
      }
    }
  }
`
}
